<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TCL官方网站</title>
	<link rel="stylesheet" href="common/css/global1.css">
	<link rel="stylesheet" href="common/css/channel1.css">
	<style>
		.iconfont-tcl{
		    font-family:"iconfont-tcl" !important;
		    font-size:16px;font-style:normal;
		    -webkit-font-smoothing: antialiased;
		    -webkit-text-stroke-width: 0.2px;
		    -moz-osx-font-smoothing: grayscale;
	    }
		.gotoActivate{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.8);
			z-index: 1000;
		}
		.gotoActivate .activateBox{
			width: 510px;
			height: 510px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -255px 0 0 -255px;
			background-color: #fff;
			text-align: center;
		}
		.gotoActivate .activateBox span{
			position: absolute;
			right: 15px;
			top: 15px;
		}
		.gotoActivate .activateBox p{
			font-size: 20px;
			color: #333;
			line-height: 35px;
		}
		.gotoActivate .activateBox button{
			width: 200px;
			height: 35px;
			color: #fff;
			background-color: #1446b5;
			border-radius: 0;
			margin-top: 40px;
			font-size: 14px;
			display: block;
			margin: 25px auto 25px;
			cursor: pointer;
			font-family: "微软雅黑";
		}
	</style>
</head>
<body>
	
	<!-- contrast html start -->
	<div class="box gray-back">
		<div class="address clearfloat">
			<div class="pay-l"><span class="pay-img"></span></div>
			<div class="pay-r">
				<div class="title">
					订单提交成功!
					<span class="red fr"><em class="font">应付总款：</em>￥127.00</span>
				</div>
				<p class="pay-text">请在 <span class="red">24小时</span> 内完成支付,超时后将取消订单</p>
				<p class="pay-text par-mar">收货信息：<span>古培辉 150****0116    广东  深圳市  南山区  中山园路1001号国际E城TCL多媒体大厦</span> <span class="fr j-slide ">订单详情<em class="arrow j-slide"></em></span></p>

				<div class="order-info">
					<div class="info-item">订单号：<span class="red">1151231129841946</span></div>
					<div class="info-item">收货信息：<span>肖木木  185***9462  广东  深圳市  南山区  克拉路花园B栋</span></div>
	  				<div class="info-item">商品名称：<span>彩虹5号电池（10粒装） 彩色</span></div>
	  				<div class="info-item ">
	  					<div class="fl">配送时间：</div>
	  					<div class="it-r">
	  						<p>不限送货时间</p>
	  						<p>小米鼠标垫  白色  通用</p>
	  						<p>小米插线板  白色  通用</p>
	  						<p>多彩便携USB线  120cm  绿色</p>
	  					</div>
	  				</div>
	  				<div class="info-item">发票信息： <span>个人</span></div>
				</div>
			</div>
		</div>
	</div>
	<!-- contrast html end -->

	<!-- Order information html start -->
	<div class="informat">
		<h3 class="title bor">选择下方付款方式</h3>
		<div class="title">支付平台<span class="font">（大额支付推荐使用支付宝）</span></div>
		<div class="info-box clearfloat">
			<div class="item"><span class="item-pay saoma-pay"></span><span class="drag">扫码付，赢红包</span></div>
			<div class="item"><span class="item-pay yinglian-pay"></span></div>
			<div class="item"><span class="item-pay zhifubao-pay"></span></div>
			<div class="item"><span class="item-pay weixin-pay"></span></div>
			<div class="item T-coinPay"><img src="common/img/T-coinPay.jpg" style="width: 100%;"></div>
		</div>
		<div class="prompts">
			支付宝：支付宝扫码支付即可参与赢红包活动，最高300元。<a href="#">查看更多>></a>
		</div>
		<div class="title">银行借记卡及信用卡<span class="font">（大额支付推荐使用支付宝）</span></div>
		<div class="info-box clearfloat">
			<div class="item"><span class="item-pay beijing-pay"></span></div>
			<div class="item"><span class="item-pay gongshang-pay"></span></div>
			<div class="item"><span class="item-pay guangda-pay"></span></div>
			<div class="item"><span class="item-pay guangfa-pay"></span></div>
			<div class="item"><span class="item-pay huaxia-pay"></span></div>
			<div class="item"><span class="item-pay jianshe-pay"></span></div>
			<div class="item"><span class="item-pay jiaotong-pay"></span></div>
			<div class="item"><span class="item-pay mingsheng-pay"></span></div>
			<div class="item"><span class="item-pay nongye-pay"></span></div>
			<div class="item"><span class="item-pay pingan-pay"></span></div>
			<div class="item"><span class="item-pay pufa-pay"></span></div>
			<div class="item"><span class="item-pay shanghai-pay"></span></div>
			<div class="item"><span class="item-pay xingye-pay"></span></div>
			<div class="item"><span class="item-pay zhaoshang-pay"></span></div>
			<div class="item"><span class="item-pay zhongguo-pay"></span></div>
			<div class="item"><span class="item-pay youzheng-pay"></span></div>
			<div class="item"><span class="item-pay zhongxin-pay"></span></div>			
		</div>
		<div class="title">快捷支付<span class="font">（支持以下各银行信用卡以及部分银行借记卡）</span></div>
		<div class="info-box clearfloat">
			<div class="item"><span class="item-pay beijing-pay"></span></div>
			<div class="item"><span class="item-pay gongshang-pay"></span></div>
			<div class="item"><span class="item-pay guangda-pay"></span></div>
			<div class="item"><span class="item-pay guangfa-pay"></span></div>
			<div class="item"><span class="item-pay huaxia-pay"></span></div>
			<div class="item"><span class="item-pay jianshe-pay"></span></div>
			<div class="item"><span class="item-pay jiaotong-pay"></span></div>
			<div class="item"><span class="item-pay mingsheng-pay"></span></div>
			<div class="item"><span class="item-pay nongye-pay"></span></div>
			<div class="item"><span class="item-pay pingan-pay"></span></div>
			<div class="item"><span class="item-pay pufa-pay"></span></div>
			<div class="item"><span class="item-pay shanghai-pay"></span></div>
			<div class="item"><span class="item-pay xingye-pay"></span></div>
			<div class="item"><span class="item-pay zhaoshang-pay"></span></div>
			<div class="item"><span class="item-pay zhongguo-pay"></span></div>
			<div class="item"><span class="item-pay youzheng-pay"></span></div>
			<div class="item"><span class="item-pay zhongxin-pay"></span></div>		
		</div>
	</div>
	<!-- Order information html end -->

	

	
	<!-- Message box html start -->
	<div class="mask j-mask"></div>
	<div class="message-box j-scancode">
		<span class="close j-close"></span>
		
		<div class="scancode sm-pay">
			<h3 class="title">支付宝扫码支付</h3>
			<div><img src="common/img/scanCode.jpg" /></div>
			<p class="align">使用手机支付宝扫码完成支付</p>
			<p class="align"><a href="#">手机支付宝下载</a>  |  <a href="#">如何使用？</a></p>
		</div>

		<div class="success">
			<div class="title">正在支付........</div>
			<div class="img"><img src="common/img/success.jpg" /></div>
			<div class="clearfloat">
				<div class="succ-item">
					<p>支付成功</p>
					<a href="#" class="red">立即查看订单详情>></a>
				</div>
				<div class="succ-item">
					<p>如果支付失败了</p>
					<a href="#" class="red">查看支付常见问题>></a>
				</div>
			</div>
		</div>

	</div>
	<!-- Message box html end -->
	
	<!--go to activate Tcoin start-->
	<div class="gotoActivate" style="display: none;">
		<div class="activateBox">
			<span class="js-cancel iconfont-tcl" style="cursor: pointer;">&#xe60f;</span>
			<p style="margin-top: 150px;">你尚未开通T币支付</p>
			<p>是否前往激活</p>
			<button class="activateTcoin">激活T币</button>
			<button class="js-cancel">取消</button>
		</div>
	</div>
	<!--go to activate Tcoin end-->
	
</body>
<script type="text/javascript" src="common/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//T-coin出现控制
		$('.T-coinPay').click(function(){
			$('.gotoActivate').show();
		});
		
		//跳转到激活T-coin页面
		$('.activateTcoin').click(function(){
			window.location.href = "T-coin.html";
		});
		
		//取消T-coin支付
		$('.js-cancel').click(function(){
			$('.gotoActivate').hide();
		})
	});
</script>
</html>